<template>
    <div class="module-card">
        <div class="module-header">
            <h2 class="module-title">用户访问统计</h2>
            <div class="flex space-x-1">
                <button class="px-2 py-1 text-xs bg-primary text-white rounded"
                    @click="setVisitPeriod('day')"
                    :class="{ 'bg-primary text-white': visitPeriod === 'day' }">日</button>
                <button class="px-2 py-1 text-xs text-gray-600 hover:bg-gray-100 rounded"
                    @click="setVisitPeriod('week')"
                    :class="{ 'bg-primary text-white': visitPeriod === 'week' }">周</button>
                <button class="px-2 py-1 text-xs text-gray-600 hover:bg-gray-100 rounded"
                    @click="setVisitPeriod('month')"
                    :class="{ 'bg-primary text-white': visitPeriod === 'month' }">月</button>
            </div>
        </div>
        <div class="p-4">
            <div class="h-64" ref="visitChart"></div>
            <div class="grid grid-cols-3 gap-4 mt-4 pt-4 border-t border-gray-100">
                <div class="text-center">
                    <div class="text-sm text-gray-500">总访问量</div>
                    <div class="text-xl font-bold mt-1">{{ totalVisits }}</div>
                </div>
                <div class="text-center">
                    <div class="text-sm text-gray-500">独立访客</div>
                    <div class="text-xl font-bold mt-1">{{ uniqueVisitors }}</div>
                </div>
                <div class="text-center">
                    <div class="text-sm text-gray-500">平均停留</div>
                    <div class="text-xl font-bold mt-1">{{ avgStayTime }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import * as echarts from 'echarts';

export default {
    name: 'UserVisitStatistics',
    setup() {
        const visitChart = ref(null);
        const visitPeriod = ref('day');
        let chartInstance = null;

        // 访问数据
        const getVisitData = () => {
            if (visitPeriod.value === 'day') {
                return {
                    labels: ['0时', '3时', '6时', '9时', '12时', '15时', '18时', '21时'],
                    values: [120, 80, 60, 210, 350, 420, 380, 250]
                };
            } else if (visitPeriod.value === 'week') {
                return {
                    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    values: [1200, 1900, 1500, 2400, 2800, 3200, 2100]
                };
            } else {
                return {
                    labels: ['第1周', '第2周', '第3周', '第4周'],
                    values: [8500, 9200, 10800, 12500]
                };
            }
        };

        // 统计数据
        const totalVisits = ref('24,580');
        const uniqueVisitors = ref('8,752');
        const avgStayTime = ref('8:25');

        // 初始化图表
        const initChart = () => {
            if (chartInstance) {
                chartInstance.dispose();
            }
            
            chartInstance = echarts.init(visitChart.value);
            const data = getVisitData();
            
            const option = {
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}: {c} 次访问'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: data.labels,
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    beginAtZero: true,
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    }
                },
                series: [{
                    name: '访问量',
                    type: 'bar',
                    data: data.values,
                    itemStyle: {
                        color: 'rgba(22, 93, 255, 0.7)',
                        borderRadius: [4, 4, 0, 0]
                    },
                    barWidth: '60%'
                }]
            };
            
            chartInstance.setOption(option);
        };

        // 设置统计周期
        const setVisitPeriod = (period) => {
            visitPeriod.value = period;
        };

        // 窗口大小变化处理
        const handleResize = () => {
            chartInstance?.resize();
        };

        onMounted(() => {
            initChart();
            window.addEventListener('resize', handleResize);
        });

        onBeforeUnmount(() => {
            window.removeEventListener('resize', handleResize);
            if (chartInstance) {
                chartInstance.dispose();
            }
        });

        watch(visitPeriod, initChart);

        return {
            visitChart,
            visitPeriod,
            setVisitPeriod,
            totalVisits,
            uniqueVisitors,
            avgStayTime
        };
    }
}
</script>